<template>
    <div class="top-list">
        <div class="top-h">
            <img src="./bb.png" alt="" class="img">
            <span class="top-title">必buy好物</span>
            <div class="inps">
                <span class="iconfont iconsearch"></span>
                <input type="text" v-model="remark" placeholder="请输入您要搜索的内容">
            </div>
            <div class="right">
                <span class="iconfont iconarrow_right"></span>
            </div>
        </div>
        <div class="items">
            <div class="item" v-for="(item,index) in itemList" :key="index" @click="turn(item.id)">
                <img :src="imgH+item.img" alt="" class="img">
                <div class="name">{{item.name}}</div>
                <div class="info">{{item.info}}</div>
                <div class="prices">
                    <span class="nowPrice">￥{{item.nowPrice}}</span>
                    <span class="oldPrice">￥{{item.oldPrice}}</span>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        props:{
          items:Array
        },
        methods:{
            turn(id){
                this.$router.push({
                    path:'/detail',
                    query:{
                        id:id
                    }
                })
            }
        },
        computed:{
            itemList(){

                if(!this.remark||this.remark.trim()==''){
                    return this.items
                }else {

                    return  this.items.filter(item=>{

                        return  item.name.indexOf(this.remark) > -1
                    })
                }
            }
        },
        data() {
            return {
                remark:"",
                imgH : process.env.VUE_APP_IMG_DOMAIN
            }
        }
    }
</script>

<style scoped lang="stylus">


    .top-list
        padding 15px 9px 9px
        .top-h
            display flex
            align-items center
            justify-content space-between

            .img
                flex 0 0 2px
                width: 2px;
                height: 15px;

            .top-title
                flex 0 0 80px
                font-size: 14px;
                font-weight: 400;
                color: rgba(240, 200, 8, 1);
                margin-left 4.5px

            .inps
                flex 1
                display flex
                align-items center
                padding 6px 10px
                background-color white
                border-bottom-left-radius 14px
                border-top-left-radius 14px
                border-bottom-right-radius 14px
                border-top-right-radius 14px

                .iconsearch
                    width: 16px;
                    height: 16px;
                    color #F0C808

                input
                    padding 0 8px
                    width 100%
                    outline none
                    font-size 11px
                    height 14px
                    color $font-color-deep
                    font-weight 300

                    &::-webkit-input-placeholder
                        font-size 11px
                        color $font-color-light
                        font-weight 300

            .right
                flex 0 0 20px
                display flex
                justify-content flex-end

                .iconarrow_right
                    font-size 11px
                    color $font-color-light
        .items
            margin-top 9px
            display flex
            justify-content space-between
            flex-wrap wrap
            .item
                overflow hidden
                flex 0 0 165px
                margin-bottom 10px
                border-radius 2.5px
                padding 5px 5px
                background-color white
                .img
                    display block
                    width 165px
                    height 160px
                    border-radius 5px
                    margin-bottom 10px
                .name
                    flex 1
                    white-space nowrap
                    overflow hidden

                    text-overflow ellipsis

                    margin-left 5px
                    font-size:16px;
                    color $font-color-deep
                .info
                    font-size 10px
                    font-weight 300
                    color $font-color-light
                    margin 5px 0 9px
                    margin-left 5px
                .prices
                    display flex
                    align-items center
                    margin-left 5px
                    font-size 0
                    .nowPrice
                        font-size 18px
                        color #F1652E
                        line-height 18px
                    .oldPrice
                        color $font-color-light
                        font-size 10px
                        text-decoration-line line-through
                        margin-left 5px
                        line-height 10px




</style>